<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
</head>
<body>
  <div>
    <button onclick="getPosts()">获取文章列表</button>
    <button onclick="addPost()">添加文章</button>
  </div>

  <!-- 
    1. 统一进行请求配置
    2. 请求过程中loading提示
    3. 请求体参数以urlencoded形式传递
    4. 请求成功的value不再是response,而是response.data
    5. 请求失败统一进行提示处理,每个请求不需要单独处理
   -->

  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>

   <script>
    // 1.统一进行请求配置  
    const instance = axios.create({
      baseURL: 'http://localhost:4000',
      timeout: 10000
    })

    // 添加请求拦截器
    instance.interceptors.request.use(config => {
      // 显示loading
      NProgress.start() // 2. 请求过程中loading提示

      // 3. 请求体参数以urlencoded形式传递
      // 判断请求体参数是否为对象
      if(config.data instanceof Object) {
        // 如果是对象
        config.data = Qs.stringify(config.data)
      }

      return config
    })

    // 添加响应拦截器
    instance.interceptors.response.use(
      response => {
        // 隐藏loading
        NProgress.done()

        // 4. 请求成功的value不再是response,而是response.data
        return response.data
      },
      error => {
        // 隐藏loading
        NProgress.done()

        // 5. 请求失败统一进行提示处理,每个请求不需要单独处理
        alert('统一处理错误: ' + error.message)

        // 向下传递一个pending状态的promise 中断promise链
        return new Promise(() => {})
      }
    )

   </script>

  <script>
    function getPosts() {
      instance.get('/post').then(
        result => {
          console.table(result.data)
        }
      )
    }
    function addPost() {
      instance.post('/post', {
        title: '🐷,🥒,🍆,🐟',
        author: '王博文'
      }).then(
        result => {
          console.table(result.data)
        }
      )
    }
  </script>
</body>
</html>